/* Copyright 2011 Elektrobit Wireless Communications Oy (EB)


  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 2 as 
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along
  with this program; if not, write to the Free Software Foundation, Inc.,
  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.


 *All rights reserved 
 *Version:Elektrobit_Qt_1.0.0_20110305 */


import Qt 4.7
import "script/script.js" as Script
import "qmlItem" 1.0

Item {
    id: screen
    width: 640; height: 360;

    function actionEnter( nId ) {
        myListView.currentIndex = 0;
        switch ( nId ) {
        case 0:
             onIconEnter("imageFilm");
            break;
        case 1:
             onIconEnter("imageMusic");
            break;
        case 2:
//             onIconEnter("imageMessage");
            break;
        case 3:
//             onIconEnter("imageTv");
            break;
        default:
                break;
        }
    }

    function actionClick( nId ) {
//        myListView.currentIndex = 0;
        switch ( nId ) {
        case 0:
             onIconClick("imageFilm");
            break;
        case 1:
             onIconClick("imageMusic");
            break;
        case 2:
             onIconClick("imageMessage");
            break;
        case 3:
             onIconClick("imageTv");
            break;
        default:
                break;
        }
    }
    property int imagePosY: 225
    property int imageWidth: 106
    property int y_offset: 220
    property bool bclick: false



    Image {
        anchors.fill: parent;
        source: Script.sysPath("images/sys/back_img.png")

        width: 640; height: 360

        ListView {
            id: myListView
            objectName: "oneItemInListView"
            signal subIconClick(int index)
            x: 10; y: 50;
            width: 445; height: 170

            model: imageDatas
            delegate: ImageShowItem {}
            orientation: ListView.Horizontal
            highlight: Image {
                id: highlightname; source: Script.sysPath("images/sys/video_border.png")
            }
            highlightRangeMode: ListView.StrictlyEnforceRange
//            preferredHighlightBegin: 80; preferredHighlightEnd: 125
            focus: true
        }


//        Image
//        {
//            id: imageFilm
//            property bool pressed: false
//            width: imageWidth; height: imageWidth
//            x: 50; y: screen.imagePosY
//            source: pressed ? Script.sysPath("images/sys/menu_btn_movie_select.png") :
//                    Script.sysPath("images/sys/menu_btn_movie_unselect.png")
//            MouseArea {
//                anchors.fill: parent
//                hoverEnabled: true;
//                onPressed: {imageFilm.pressed = true; }
//                onReleased: {imageFilm.pressed = false; actionClick(imageFilm)}
//                onEntered: {imageFilm.pressed = true; actionEnter(imageFilm)}
//                onExited: {imageFilm.pressed = false}
//            }
//        }
//        Image
//        {
//            id: imageMusic
//            property bool pressed: false
//            width: imageWidth; height: imageWidth
//            x: 200; y: screen.imagePosY
//            source: pressed ? Script.sysPath("images/sys/menu_btn_music_select.png") :
//                    Script.sysPath("images/sys/menu_btn_music_unselect.png")

//            MouseArea {
//                hoverEnabled: true;
//                anchors.fill: parent
//                onPressed: { imageMusic.pressed = true; }
//                onReleased: {imageMusic.pressed = false; actionClick(imageMusic)}
//                onEntered: {imageMusic.pressed = true; actionEnter(imageMusic)}
//                onExited: { imageMusic.pressed = false }
//            }
//        }

//        Image
//        {
//            id: imageMessage
//            property bool pressed: false
//            width: imageWidth; height: imageWidth
//            x: 350; y: screen.imagePosY
//            source: pressed ? Script.sysPath("images/sys/menu_btn_message_select.png") :
//                    Script.sysPath("images/sys/menu_btn_message_unselect.png")

//            MouseArea {
//                anchors.fill: parent
//                    onPressed: {imageMessage.pressed = true; }
//                onReleased: {imageMessage.pressed = false; }
//            }
//        }

//        Image
//        {
//            id: imageTv
//            property bool pressed: false
//            width: imageWidth; height: imageWidth
//            x: 500; y: screen.imagePosY
//            source: pressed ? Script.sysPath("images/sys/menu_btn_tv_select.png") :
//                    Script.sysPath("images/sys/menu_btn_tv_unselect.png")
//            MouseArea {
//                anchors.fill: parent
//                onPressed: {imageTv.pressed = true; }
//                onReleased: {imageTv.pressed = false; }
//            }
//        }

        Rectangle {
            id: rect;
            width: 640
            height: screen.height - y_offset
            color: "black"
            y: y_offset
            ListModel {
                id: mylist
                 ListElement {
                     icon: "images/sys/menu_btn_movie_select.png"
                     name: "imageFilm"
                 }
                 ListElement {
                     icon: "images/sys/menu_btn_music_select.png"
                     name: "imageMusic"
                 }
                 ListElement {
                     icon: "images/sys/menu_btn_message_select.png"
                     name: "imageMessage"
                 }
                 ListElement {
                     icon: "images/sys/menu_btn_tv_select.png"
                     name: "imageTv"
                 }
             }

            Component {
                id: delegate
               Item {
                   id:itema
                   width: 120
                   height: 150
                   scale: PathView.scale
                   opacity: PathView.opacity

                Column {
                    Image { //anchors.horizontalCenter: name.horizontalCenter
                            width: 100; height: 100; source: Script.sysPath(icon) }
                   // Text { text: name; font.pointSize: 16 }

                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {

                        if(aa.currentIndex == index) {
                            console.log("click index:", index)
                            actionClick(index);
                        }

                        else{
                            //highlight.visible=false
                            bclick = true;
                            timer.start();
                             aa.currentIndex=index
//                             console.log("click move *************end")

                         }
                    }

                }
            }
           }
            Component{
                id:highlight
                Rectangle {
                          id:cc
                          width:85
                          height:85
                          color:"lightpink"
                          radius:5
                          visible:!aa.moving && !bclick
                          anchors {
                              left:parent.left
                              leftMargin:267
                              bottom:parent.bottom
                              bottomMargin:3
                               }

                         }
//                Image {
//                    id: highlightid
//                    source: Script.sysPath("images/sys/btn_border.png")
//                    visible:!aa.moving && !bclick
//                    width: 85
//                    height: 85

//                }

                 }

            Timer {
                id: timer;
                interval: 500; running: false; repeat: false
                onTriggered: {bclick = false; actionEnter(aa.currentIndex); console.log("move endddddddddddd");}
            }

            PathView {
                id:aa
                anchors.fill: rect
                model: mylist
                delegate: delegate
                highlight:highlight
                path: Path {
                    startX: rect.width/2;
                    startY: 340-y_offset
                    PathAttribute{name:"scale";value:1.0}
                    PathAttribute{name:"opacity";value:1.0}
                    PathQuad { x: rect.width/2; y: 255-y_offset; controlX: rect.width/2-200; controlY: 320-y_offset }
                    PathAttribute{name:"scale";value:0.5}
                    PathAttribute{name:"opacity";value:0.5}
                    PathQuad { x: rect.width/2; y: 340-y_offset; controlX: rect.width/2+200; controlY: 260-y_offset }
                }
                onMovementEnded:{
                    console.log("move end")
                    actionEnter(aa.currentIndex);
                   }
                }
            }
    }
}

